<template>
  <div id="spu">
    <div class="containner flex justify-between item-start">
      <!-- 商品相册 -->
      <div class="spu-ablum-bar">
        <!-- 相册大图 -->
        <img
          :src="base_img_url+product.spu.attrKeyList[0].attrValueList[product.ablum_index].value_images[product.ablum_item_index]"
          width="450px" height="450px" class="rounded hand">
        <div class="mt-10 spu-ablum-group flex item-center">
          <div class="spu-ablum-left hand" @click="ablum_left">&lt;</div>
          <div class="spu-ablum-center" ref="ablum">
            <table border="0px" cellpadding="0px" cellspacing="0px">
              <tr>
                <!-- 轮播图 -->
                <td v-for="(ablum,index) in product.spu.attrKeyList[0].attrValueList[product.ablum_index].value_images"
                  :key="index">
                  <img width="90px" height="90px" :src="base_img_url+ablum" class="spu-ablum-item hand"
                    :class="{'active':index==product.ablum_item_index}" @mousemove="ablum_mouseovered(index)">
                </td>
              </tr>
            </table>
          </div>
          <div class="spu-ablum-right hand" @click="ablum_right">&gt;</div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="spu-info-bar">
        <div class="text-left text-xl bold dark">{{product.sku.sku_name}}</div>
        <div class="text-left text-xl mt-10"><span class="red weight">现价：</span><span
            class="red weight sku-price">￥{{product.sku.sku_price}}</span><span
            class="gray bold text-md ml-20">原价：</span><span
            class="gray bold sku-original-price">￥{{product.sku.sku_originalprice}}</span></div>
        <div class="text-left bold gray text-lg my-20"> 库存：{{product.sku.sku_quantity}} </div>
        <!-- 商品属性attrKeyList -->
        <div class="flex item-start sku-attr my-5" v-for="(attr,index) in product.spu.attrKeyList" :key="attr.key_id">
          <div class="sku-attr-name text-left gray text-lg bold">{{attr.key_name}}</div>
          <div class="sku-attr-group flex wrap item-center">
            <!-- 商品属性attrKeyList中的attrValueList -->
            <div class="sku-attr-item gray bold text-md rounded hand pr-10 my-5 flex item-center mx-5"
              v-for="(attr_value,img_index) in attr.attrValueList" :key="attr_value.value_id"
              :class="{'active':valid_attr_value(attr_value)}"
              @click="attr_value_clicked(attr_value,index,attr_value.value_images.length > 0,img_index)">
              <img :src="base_img_url+attr_value.value_images[0]" height="34px" v-if="attr_value.value_images.length>0">
              <div>{{attr_value.value_name}}</div>
            </div>
          </div>
        </div>
        <div class="mt-20 flex item-center"><input type="number" v-model="product.buy_number" min="1"
            class="buy-number hand"><button class="btn-cart hand mx-20" @click="cart_clicked">加入购物车</button><button
            class="btn-buy hand">立即购买</button></div>
      </div>
    </div>
    <div class="containner mt-20">
      <div class="px-20 py-20 rounded box-shadow"> <img :src="require('../assets/spu_introduce_01.jpg')" width="100%">
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['product']),
      ...mapState('website', ['base_img_url']),
    },
    methods: {
      ...mapActions('cart', ['add_cart']),
      ...mapMutations('product', ['set_ablum_item_index', 'set_sku', 'set_sku_attr_list', 'set_ablum_index']),
      ablum_mouseovered(index) {
        this.set_ablum_item_index(index)
      },
      //轮播图左移
      ablum_left() {
        this.$refs.ablum.scrollLeft += 410
      },
      //轮播图右移
      ablum_right() {
        this.$refs.ablum.scrollLeft -= 410
      },
      // 验证当前选择的商品Sku 是否含有 某个规格属性值
      valid_attr_value(attr_value) {
        // 循环 当前选择的商品Sku属性
        for (let sku_attr of this.product.sku_attr_list) {
          // 判断 当前循环到的商品Sku属性值id 是否和 当前要验证的规格属性值id一致
          if (sku_attr.value_id == attr_value.value_id) {
            return true;
          }
        }
        return false;
      },
      // 点击了商品规格属性值
      attr_value_clicked(attr_value, index, has_img, img_index) {
        // 根据这次更改的商品规格属性值 重新组成sku
        let new_sku = this.product.sku_attr_list;
        new_sku[index] = attr_value;
        console.log(new_sku)
        // 判断这次更改商品规格属性值，是否可以组成新的有效sku
        // 循环有效的sku
        for (let sku of this.product.spu.skuList) {
          // 标记变量
          let flag = 0;
          // 获取sku中的属性列表
          let sku_attr_list = JSON.parse(sku.sku_spuattr);
          // 循环sku中的属性
          for (let i = 0; i <= sku_attr_list.length - 1; i++) {
            if (sku_attr_list[i].value_id != new_sku[i].value_id) {
              flag = 1;
              break;
            }
          }
          if (flag == 0) {
            // new_sku 可以组成新的sku
            this.set_sku(sku);
            // 判断是否需要改变相册索引
            if (has_img) {
              this.set_ablum_index(img_index);
            }
          }
        }
      },
      cart_clicked() {
        this.add_cart()
      }
    },
    mounted() {
      //设置当前spu的sku列表的第一个数据
      this.set_sku(this.product.spu.skuList[0])
      //设置当前spu的sku列表的第一个数据的属性
      this.set_sku_attr_list(JSON.parse(this.product.sku.sku_spuattr))
    }
  }
</script>

<style scoped="scoped">
  /*  商品相册栏  */
  .spu-ablum-bar {
    width: 452px;
  }

  .spu-ablum-group {
    color: #ccc;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
  }

  .spu-ablum-left,
  .spu-ablum-right {
    width: 20px;
  }

  .spu-ablum-center {
    width: 410px;
    overflow: hidden;
  }

  .spu-ablum-item {
    border: 2px solid transparent;
    margin: 0px 3px;
  }

  .spu-ablum-item.active {
    border: 2px solid #df3033;
  }

  /*  商品信息栏  */
  .spu-info-bar {
    width: 740px;
  }

  .sku-price {
    font-size: 28px;
  }

  .sku-original-price {
    text-decoration: line-through;
  }

  .sku-attr-name {
    width: 100px;
    height: 34px;
    line-height: 34px;
  }

  .sku-attr-group {
    width: 620px;
  }

  .sku-attr-item {
    border: 2px solid #eee;
    height: 34px;
    line-height: 34px;
  }

  .sku-attr-item.active {
    border: 2px solid #df3033;
  }

  .buy-number {
    outline: none;
    padding: 6px 15px;
    width: 40px;
    border: 1px solid #df3033;
  }

  .btn-cart,
  .btn-buy {
    outline: none;
    padding: 5px 15px;
    border: 1px solid #c33;
    background-color: #c33;
    color: #fff;
  }

  .btn-cart:hover,
  .btn-buy:hover {
    background-color: #d33;
  }
</style>
